<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-row>
                    <el-col :span="12" v-if="!queryObj.tenant_id">
                        <el-form-item label="租户:" prop="tenant_id">
                            <SelectPage v-model="form.tenant_id" :url="'/admin/px.tenant/selectPage'"
                                        placeholder="请选择所属租户"
                                        show_field="name" show_id="id" query_field="id" :multiple="false" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="!queryObj.topic_id">
                        <el-form-item label="专题:" prop="topic_id">
                            <SelectPage v-model="form.topic_id"
                                        placeholder="请选择培训专题"
                                        :url="'/admin/px.cms_topic/selectPage'" show_field="title" show_id="id" query_field="id" :multiple="false" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="标题:" prop="title">
                            <el-input v-model="form.title" placeholder="请输入标题" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态:" prop="status">
                            <el-select v-model="form.status" placeholder="请选择状态" clearable>
                                <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序:" prop="sortweight">
                            <el-input-number v-model="form.sortweight" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="图片:" prop="pic_urls">
                    <ImageUpload v-model="form.pic_urls" :limit="10" />
                </el-form-item>
                <el-form-item label="视频地址:" prop="video">
                    <file-upload v-model="form.video" :limit="1"></file-upload>
                </el-form-item>
                <el-form-item label="内容:" prop="content">
                    <editor v-model="form.content" placeholder="请输入内容" :rows="4" type="textarea" />
                </el-form-item>
                <el-form-item label="查看数:" prop="view_num" v-if="disabled">
                    <el-input-number v-model="form.view_num" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
import File from "../../tool/file";
export default {
    name: 'EditForm',
    components: {File},
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        queryObj: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                tenant_id: [{ required: true, message: "请输入租户", trigger: "blur" }],
                topic_id: [{ required: true, message: "请输入专题", trigger: "blur" }],
                title: [{ required: true, message: "请输入标题", trigger: "blur" }],
                description: [{ required: true, message: "请输入简介", trigger: "blur" }],
                pic_urls: [{ required: true, message: "请输入图片", trigger: "blur" }],
                video: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
                view_num: [{ required: true, message: "请输入查看数", trigger: "blur" }],
                share_num: [{ required: true, message: "请输入分享数", trigger: "blur" }],
                zan_num: [{ required: true, message: "请输入点赞数", trigger: "blur" }],
                collect_num: [{ required: true, message: "请输入收藏数", trigger: "blur" }],
                status: [{ required: true, message: "请输入状态", trigger: "blur" }],
                duration: [{ required: true, message: "请输入视频时长", trigger: "blur" }],
            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            status:[
               { label: "启用", value: 1 },
               { label: "禁用", value: 2 },
            ],

        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        getVideoDuration(url) {
            return new Promise((rel, reg) => {
                var audioElement = new Audio(url);
                var self = this;
                var result;
                audioElement.addEventListener("loadedmetadata", function() {
                    // 视频时长值的获取要等到这个匿名函数执行完毕才产生
                    result = audioElement.duration; //得到时长为秒，小数，182.36
                    rel(parseInt(result))
                });
            });
        },
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate(async (valid, obj) => {
                if (valid) {
                    if (this.form.video) {
                        this.$set(this.form, 'duration', await this.getVideoDuration(this.form.video))
                    }
                    this.$emit('submitForm', {
                        ...this.queryObj,
                        ...this.form
                    })
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
